<template>
  <div v-color="red">
    <h2>局部中定义的指令</h2>
    <input type="text" v-focus="{ h: 20, w: 500 }" />
  </div>
</template>

<script>
export default {
  name: 'ziling',
  // 局部 定义自定义指令
  directives: {
    // 属性名: 指令的名称
    // 属性值： 指令配置对象
    focus: {
      inserted(el, binding) {
        el.style.width = binding.value.w + 'px'
        el.style.height = binding.value.value.h + 'px'
        el.focus()
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
